﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现网页tab栏切换</title>
<script src="../js/jquery.min.js"></script>
<style>
 * {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
} 
.wrapper { 
	width:500px;
	height:475px; 
	margin-top:20px;
}
.tab {
	border:1px solid #ddd;
	border-bottom:0;
	height:36px;
	width:320px;
}
.tab li {
	position:relative;
	float:left;
	width:80px;
	height:34px;
	line-height:34px;
	text-align:center;
	cursor:pointer;
	border-top:4px solid #fff;
}
.tab span {
	position:absolute;
	right:0;
	top:10px;
	background:#ddd;
	width:1px;
	height:14px;
	overflow:hidden;
}
.products {
	width:500;
	border:1px solid #ddd;
	height:476px;
}
.products .main {
	float:left;
	display:none;
} 
.products .main.selected {
	display:block;
}
.tab li.active {
	border-color:red;
	border-bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""></a>
        </div>
        <div class="main">
            <a href="###"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt=""></a>
        </div>
        <div class="main">
            <a href="###"><img src="http://www.jq22.com/img/cs/500x500-3.png" alt=""></a>
        </div>
        <div class="main">
            <a href="###"><img src="http://www.jq22.com/img/cs/500x500-4.png" alt=""></a>
        </div>
    </div>
</div>

<script>
 jQuery(window).ready(function() {
     //需求:鼠标放到那个li上，让该li添加active类，下面的对应的.main的div添加selected
     $(".tab>li").mouseenter(function() {
         //不用判断，当前的li添加active类，其他的删除active类
         $(this).addClass("active").siblings("li").removeClass("active");
         //对应索引值的div添加selected类，其他的删除selected类
         $(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
     });
 });
</script>

</body>
</html>
